<!-- 性别选择组件 -->
<template>
	<view name='genderPopup'>
		<text v-if="gender" class="date text" @click="open">{{gender==1?'男':gender==0?'女':'保密'}}</text>
		<text v-else class="date-hint text" @click="open">性别(必选)</text>
		<uni-popup ref="popup" type="bottom">
			<view class="popup-wrapper">
				<text class="gender-title">性别</text>
				<radio-group @change="genderChange">
					<radio name="gender" value="1" @click="close" :checked="isChecked[2]">
						<i class="material-icons" style="visibility: hidden;">&#xe611;</i>
						<view class="gender-text">男</view>
					</radio>
					<radio name="gender" value="0" @click="close" :checked="isChecked[1]">
						<i class="material-icons" style="visibility: hidden;">&#xe611;</i>
						<view class="gender-text">女</view>
					</radio>
					<radio name="gender" value="-1" @click="close" :checked="isChecked[0]">
						<i class="material-icons" style="visibility: hidden;">&#xe611;</i>
						<view class="gender-text">保密</view>
					</radio>
				</radio-group>
				<button class="gender-cancel" @click="close">取消</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '../uni-popup/uni-popup.vue'
	export default {
		name: 'genderPopup',
		components: {
			uniPopup
		},
		data() {
			return {
				gender: '',
				isChecked: [false, false, false]
			};
		},
		methods: {
			close() {
				this.$refs.popup.close();
			},
			genderChange(e) {
				this.gender = e.detail.value;
				let genderData = {
					val: this.gender,
					target: {
						id: "gender"
					}
				};
				this.$emit("change", genderData)
				// 改变radio checked状态
				for (let i = 0; i < this.isChecked.length; i++) {
					if (i == (parseInt(this.gender) + 1)) {
						this.isChecked[i] = true;
					} else if (this.isChecked[i]) {
						this.isChecked[i] = false;
					}
				}
			},
			open() {
				this.$refs.popup.open();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text {
		display: flex;
		align-items: center;
		line-height: 80upx;
		font-size: 16px;
		color: $uni-text-color-grey;
		border: none;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}

	.text:hover {
		border: none;
	}

	.date {
		color: #000000;
	}

	.date-hint {
		color: #808080;
	}

	.popup-wrapper {
		height: 600upx;
		background-color: #FFFFFF;
		border-radius: 40upx 40upx 0 0;
		display: flex;
		flex-direction: column;
	}

	.gender-title {
		font-size: 18px;
		font-weight: bold;
		margin-top: 40upx;
		display: flex;
		justify-content: center;
	}

	radio-group {
		display: flex;
		flex-direction: column;
		margin-top: 10upx;
	}

	/deep/ .uni-radio-input {
		display: none;
	}

	/deep/ .uni-radio-input-checked~i,
	/deep/ .uni-radio-input-checked~view {
		visibility: visible !important;
		color: #1f80ff;
		transition: all .15s ease-in;
		-webkit-transition: all .15s ease-in;
	}

	.gender-text {
		display: flex;
		height: 100upx;
		align-items: center;
		font-size: 18px;
		font-weight: bold;
	}

	.gender-cancel {
		margin-top: 40upx;
		background-color: #F0F0F0;
		color: #808080;
		font-size: 18px;
		font-weight: bold;
		width: 650upx;
		height: 110upx;
		line-height: 110upx;
		border: 1upx solid #FFFFFF;
		border-radius: 200upx;
		transition: all .15s ease-in;
		-webkit-transition: all .15s ease-in;
	}

	.gender-cancel:after {
		border: none;
	}

	.button-hover {
		background-color: #E0E0E0;
	}
</style>
